<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>鼠标移入效果</title>
	<link rel="stylesheet" href="./css/index.css">
	<style>
		.action-btn {
			position: fixed;
			top: 50px;
			right: 50px;
			padding: 5px 20px;
			font-size: 18px;
			border-radius: 16px;
			border: none;
			letter-spacing: 4px;
			font-weight: 600;
			color: #333;
			cursor: pointer;
		}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
</head>

<body>
	<button class="action-btn" onclick="takeScreenshot()">截图</button>
	<div class="avatar" id="capture"></div>
</body>

</html>
<script>
	function takeScreenshot() {
		html2canvas(document.querySelector("#capture")).then(canvas => {
			var img = canvas.toDataURL("image/png");
			var a = document.createElement('a');
			a.href = img;
			a.download = 'screenshot.png';
			a.click();
		});
	}
</script>